JavaScript Async Generator Helpers: Mestring af Stream-oprettelse og -styring

Asynkron programmering i JavaScript har udviklet sig markant gennem årene. Med introduktionen af Async Generators og Async Iterators fik udviklere stærke værktøjer til at håndtere strømme af asynkrone data. Nu forbedrer JavaScript Async Generator Helpers yderligere disse muligheder ved at tilbyde en mere strømlinet og udtryksfuld måde at oprette, transformere og styre asynkrone datastrømme på. Denne guide udforsker det grundlæggende i Async Generator Helpers, dykker ned i deres funktionaliteter og demonstrerer deres praktiske anvendelser med klare eksempler.

Forståelse af Async Generators og Iterators

Før vi dykker ned i Async Generator Helpers, er det afgørende at forstå de underliggende koncepter af Async Generators og Async Iterators.

Async Generators

En Async Generator er en funktion, der kan pauses og genoptages, og som yielder værdier asynkront. Det giver dig mulighed for at generere en sekvens af værdier over tid uden at blokere hovedtråden. Async Generators defineres ved hjælp af async function*-syntaksen.

Eksempel:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simuler asynkron operation
    yield i;
  }
}

// Anvendelse
const sequence = generateSequence(1, 5);

Async Iterators

En Async Iterator er et objekt, der tilbyder en next()-metode, som returnerer et promise, der resolves til et objekt indeholdende den næste værdi i sekvensen og en done-egenskab, der indikerer, om sekvensen er udtømt. Async Iterators forbruges ved hjælp af for await...of-løkker.

Eksempel:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Introduktion til Async Generator Helpers

Async Generator Helpers er et sæt metoder, der udvider funktionaliteten af Async Generator-prototyper. De giver bekvemme måder at manipulere asynkrone datastrømme på, hvilket gør koden mere læsbar og vedligeholdelig. Disse hjælpere fungerer 'lazy', hvilket betyder, at de kun behandler data, når det er nødvendigt, hvilket kan forbedre ydeevnen.

De følgende Async Generator Helpers er almindeligt tilgængelige (afhængigt af JavaScript-miljøet og polyfills):

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

Detaljeret Gennemgang af Async Generator Helpers

1. `map()`

`map()`-hjælperen transformerer hver værdi i den asynkrone sekvens ved at anvende en given funktion. Den returnerer en ny Async Generator, der yielder de transformerede værdier.

Syntaks:

asyncGenerator.map(callback)

Eksempel: Konvertering af en stream af tal til deres kvadrater.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Simuler asynkron operation
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Eksempel fra den virkelige verden: Forestil dig at hente brugerdata fra flere API'er og have brug for at transformere dataene til et konsistent format. `map()` kan bruges til at anvende en transformationsfunktion på hvert brugerobjekt asynkront.

async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Normaliser brugerdataformat
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

`filter()`-hjælperen opretter en ny Async Generator, der kun yielder de værdier fra den oprindelige sekvens, der opfylder en given betingelse. Det giver dig mulighed for selektivt at inkludere værdier i den resulterende stream.

Syntaks:

asyncGenerator.filter(callback)

Eksempel: Filtrering af en stream af tal for kun at inkludere lige tal.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Eksempel fra den virkelige verden: Behandling af en stream af logposter og filtrering af poster baseret på deres alvorsgrad. For eksempel kun at behandle fejl og advarsler.

async function* readLogFile(filePath) {
  // Simuler asynkron læsning af en logfil linje for linje
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

`take()`-hjælperen opretter en ny Async Generator, der kun yielder de første `n` værdier fra den oprindelige sekvens. Det er nyttigt til at begrænse antallet af elementer, der behandles fra en potentielt uendelig eller meget stor stream.

Syntaks:

asyncGenerator.take(n)

Eksempel: Tager de første 3 tal fra en stream af tal.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Eksempel fra den virkelige verden: Visning af de 5 øverste søgeresultater fra et asynkront søge-API.

async function* search(query) {
  // Simuler hentning af søgeresultater fra et API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

`drop()`-hjælperen opretter en ny Async Generator, der springer de første `n` værdier fra den oprindelige sekvens over og yielder de resterende værdier. Det er det modsatte af `take()` og er nyttigt til at ignorere de indledende dele af en stream.

Syntaks:

asyncGenerator.drop(n)

Eksempel: Udelader de første 2 tal fra en stream af tal.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Eksempel fra den virkelige verden: Paginering gennem et stort datasæt hentet fra et API, hvor de allerede viste resultater springes over.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simuler hentning af data med offset
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // spring elementer fra tidligere sider over

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Eksempel på anvendelse
displayPage(2);

5. `flatMap()`

`flatMap()`-hjælperen transformerer hver værdi i den asynkrone sekvens ved at anvende en funktion, der returnerer en Async Iterable. Derefter flader den den resulterende Async Iterable ud til en enkelt Async Generator. Dette er nyttigt til at transformere hver værdi til en stream af værdier og derefter kombinere disse streams.

Syntaks:

asyncGenerator.flatMap(callback)

Eksempel: Transformerer en stream af sætninger til en stream af ord.

async function* generateSentences() {
  const sentences = [
    'Dette er den første sætning.',
    'Dette er den anden sætning.',
    'Dette er den tredje sætning.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Eksempel fra den virkelige verden: Henter kommentarer til flere blogindlæg og kombinerer dem i en enkelt stream til behandling.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simuler hentning af blogindlægs-ID'er fra et API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simuler hentning af kommentarer til et blogindlæg fra et API
  const comments = [
    { postId: postId, text: `Kommentar 1 til indlæg ${postId}` },
    { postId: postId, text: `Kommentar 2 til indlæg ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

`reduce()`-hjælperen anvender en funktion mod en akkumulator og hver værdi i Async Generator (fra venstre mod højre) for at reducere den til en enkelt værdi. Dette er nyttigt til at aggregere data fra en asynkron stream.

Syntaks:

asyncGenerator.reduce(callback, initialValue)

Eksempel: Beregner summen af tal i en stream.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

Eksempel fra den virkelige verden: Beregner den gennemsnitlige svartid for en række API-kald.

async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Fejl ved hentning af ${endpoint}: ${error}`);
      yield 0; // Eller håndter fejlen passende
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Gennemsnitlig svartid: ${average} ms`);
}

7. `toArray()`

`toArray()`-hjælperen forbruger Async Generator og returnerer et promise, der resolves til et array, der indeholder alle de værdier, som generatoren har yielded. Dette er nyttigt, når du har brug for at samle alle værdier fra streamen i et enkelt array til yderligere behandling.

Syntaks:

asyncGenerator.toArray()

Eksempel: Samler tal fra en stream i et array.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Tal-array:', numberArray);
}

processNumbers();

Eksempel fra den virkelige verden: Samler alle elementer fra et pagineret API i et enkelt array til klientside-filtrering eller -sortering.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Juster baseret på API'ets pagineringsgrænser

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // Ikke mere data
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Hentede ${itemsArray.length} elementer.`);
    // Yderligere behandling kan udføres på `itemsArray`
}

8. `forEach()`

`forEach()`-hjælperen udfører en given funktion én gang for hver værdi i Async Generator. I modsætning til andre hjælpere returnerer `forEach()` ikke en ny Async Generator; den bruges til at udføre sideeffekter på hver værdi.

Syntaks:

asyncGenerator.forEach(callback)

Eksempel: Logger hvert tal i en stream til konsollen.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Tal:', num);
  });
}

processNumbers();

Eksempel fra den virkelige verden: Sender realtidsopdateringer til en brugergrænseflade, efterhånden som data behandles fra en stream.

async function* fetchRealTimeData(dataSource) {
    // Simuler hentning af realtidsdata (f.eks. aktiekurser).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    // Simuler opdatering af brugergrænsefladen
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Opdaterer UI med data: ${JSON.stringify(data)}`);
    // Kode til at opdatere UI ville være her.
  });
}

Kombinering af Async Generator Helpers til komplekse datastrømme

Den virkelige styrke ved Async Generator Helpers kommer fra deres evne til at blive kædet sammen for at skabe komplekse datastrømme (pipelines). Dette giver dig mulighed for at udføre flere transformationer og operationer på en asynkron stream på en kortfattet og læsbar måde.

Eksempel: Filtrering af en stream af tal for kun at inkludere lige tal, derefter kvadrere dem, og til sidst tage de første 3 resultater.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Eksempel fra den virkelige verden: Henter brugerdata, filtrerer brugere baseret på deres placering, transformerer deres data til kun at inkludere relevante felter, og viser derefter de første 10 brugere på et kort.

async function* fetchUsers() {
  // Simuler hentning af brugere fra en database eller API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Viser op til ${maxUsers} brugere fra ${location} på kortet:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Anvendelseseksempler:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfills og browserunderstøttelse

Understøttelse for Async Generator Helpers kan variere afhængigt af JavaScript-miljøet. Hvis du skal understøtte ældre browsere eller miljøer, kan det være nødvendigt at bruge polyfills. En polyfill leverer den manglende funktionalitet ved at implementere den i JavaScript. Flere polyfill-biblioteker er tilgængelige for Async Generator Helpers, såsom core-js.

Eksempel med core-js:

// Importer de nødvendige polyfills
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... importer andre nødvendige hjælpere

Fejlhåndtering

Når man arbejder med asynkrone operationer, er det afgørende at håndtere fejl korrekt. Med Async Generator Helpers kan fejlhåndtering udføres ved hjælp af try...catch-blokke inden i de asynkrone funktioner, der bruges i hjælperne.

Eksempel: Håndtering af fejl ved hentning af data inden i en map()-operation.

async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP-fejl! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Fejl ved hentning af data fra ${url}: ${error}`);
      yield null; // Eller håndter fejlen passende, f.eks. ved at yield et fejl-objekt
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Propager fejlen
    }
    // Behandl data
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Springer element over på grund af fejl');
      continue;
    }
    console.log('Behandlet element:', item);
  }
}

processData();

Bedste praksis og overvejelser

• Lazy Evaluering: Async Generator Helpers evalueres 'lazy', hvilket betyder, at de kun behandler data, når det anmodes. Dette kan forbedre ydeevnen, især når man håndterer store datasæt.
• Fejlhåndtering: Håndter altid fejl korrekt inden i de asynkrone funktioner, der bruges i hjælperne.
• Polyfills: Brug polyfills, når det er nødvendigt for at understøtte ældre browsere eller miljøer.
• Læsbarhed: Brug beskrivende variabelnavne og kommentarer for at gøre din kode mere læsbar og vedligeholdelig.
• Ydeevne: Vær opmærksom på ydeevnekonsekvenserne ved at kæde flere hjælpere sammen. Selvom 'laziness' hjælper, kan overdreven kædning stadig introducere overhead.

Konklusion

JavaScript Async Generator Helpers tilbyder en stærk og elegant måde at oprette, transformere og styre asynkrone datastrømme på. Ved at udnytte disse hjælpere kan udviklere skrive mere kortfattet, læsbar og vedligeholdelig kode til håndtering af komplekse asynkrone operationer. En forståelse af det grundlæggende i Async Generators og Iterators, sammen med funktionaliteterne i hver hjælper, er afgørende for effektivt at udnytte disse værktøjer i virkelige applikationer. Uanset om du bygger datastrømme, behandler realtidsdata eller håndterer asynkrone API-svar, kan Async Generator Helpers markant forenkle din kode og forbedre dens samlede effektivitet.